<template>
  <div class="app">
    <div class="search-bar">
      <el-form :model="searchData" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="工号" style="margin-bottom: 5px;">
              <el-input v-model="searchData.userId" size="medium" class="input" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名" style="margin-bottom: 5px;">
              <el-input v-model="searchData.userName" size="medium" class="input" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属公司" style="margin-bottom: 5px;">
              <el-input v-model="searchData.companyName" size="medium" class="input" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div style="margin-top: 3px;">
              <el-button icon="el-icon-search" type="primary" size="small" @click="handleSearch">查询</el-button>
              <el-button icon="el-icon-refresh-left" size="small" @click="handleClear">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="ref2" class="table-box">
      <div class="btn-bar">
        <el-button icon="el-icon-plus" type="primary" size="small" @click="handleAdd">新增</el-button>
      </div>
      <tableComponent
        class="table"
        :height="height"
        :data="tableData"
        :columns="peopleTableColumns"
        @change="tablePage"
        :table-option="tableOption"
        :page-option="searchData.page"
        :total="total"
        :stripe="stripe"
      >
        <template scope="scope">
          <el-button @click="addJurisdiction(scope.scope.row)" type="text" size="mini">新增权限</el-button>
          <el-button @click="watchJurisdiction(scope.scope.row)" type="text" size="mini">查看权限</el-button>
        </template>
      </tableComponent>
    </div>
    <el-dialog title="新增用户" :visible.sync="dialogVisible" width="85%">
      <div ref="dialogbox" class="dialog-box">
        <el-form :model="addForm" label-width="40px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名" style="margin-bottom: 5px;">
                <el-input v-model="addForm.empName" size="small" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工号" style="margin-bottom: 5px;">
                <el-input v-model="addForm.psId" size="small" class="input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div style="margin-top: 5px;">
                <el-button type="primary" size="small" @click="handleSearchDialog">查询</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <tableComponent
          :height="dialogHeight"
          :columns="peopleDialogTableColumns"
          :data="dialogtableData"
          :tableOption="dialogtableOption"
          :page-option="addForm.page"
          :stripe="stripe"
          @rowClick="rowClick"
          @change="dialogChange"
          :loading="tableLoading"
          :total="dialogTotal">
        </tableComponent>
      </div>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增权限" :visible.sync="dialogVisibleAdd" width="50%" :before-close="handleCancleJurisdiction">
      <el-form ref="form" :model="jurisdictionForm" label-position="left" label-width="80px" :rules="rules" style="padding: 0 20px">
        <el-form-item label="工号" prop="userId">
          <el-input v-model="jurisdictionForm.userId" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="jurisdictionForm.userName" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="companyName">
          <el-input v-model="jurisdictionForm.companyName" disabled></el-input>
        </el-form-item>
        <el-form-item label="关联公司" prop="addCompanyList" style="margin-left: -9px;">
          <el-select v-model="jurisdictionForm.addCompanyList"
            multiple
            placeholder="请输入公司名搜索"
            filterable
            remote
            reserve-keyword
            :remote-method="remoteMethod"
            style="width: calc(100% - 9px); margin-left: 9px"
            @change="selectCompany"
            class="select">
            <el-option
              v-for="item in companyOptions"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联角色" prop="addRoleList" style="margin-left: -9px;">
          <el-select v-model="jurisdictionForm.addRoleList" multiple placeholder="请选择角色" class="select" style="width: calc(100% - 9px); margin-left: 9px">
            <el-option
              v-for="item in rolesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="handleCancleJurisdiction">取 消</el-button>
        <el-button type="primary" @click="handleAddJurisdiction('form')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看权限" :visible.sync="dialogVisibleWatch" width="70%">
      <div ref="watch" class="dialog-box">
        <tableComponent
          :height="watchHeight"
          :columns="watchTableColumns"
          :data="watchTableData"
          :tableOption="watchTableOption"
          :page-option="queryDetail.page"
          @change="watchPage"
          :total="watchTotal"
          :stripe="stripe">
          <template scope="scope">
            <el-button @click="handleDelete(scope.scope.row)" type="text" size="mini">删除</el-button>
          </template>
        </tableComponent>
      </div>
      <span slot="footer">
        <el-button @click="dialogVisibleWatch = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableComponent from '@/components/Table/table'
import { peopleTableColumns, peopleDialogTableColumns, watchTableColumns } from './index.js'
import { queryRoles, queryUserByEmpName1, saveUserRole } from '@/api/modules/systemManage.js'
import { addRolesJurisdiction, addCompanyJurisdiction, addAllJurisdiction, queryDetailJurisdiction, deleteJurisdiction } from '@/api/modules/systemManage.js'
export default {
  components: {
    tableComponent
  },
  data() {
    return {
      searchData: {
        userId: '',
        userName: '',
        companyName: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      height: null,
      peopleTableColumns,
      tableLoading: false,
      tableData: [],
      tableOption: {
        isShowOperate: true,
        operateWidth: '100px'
      },
      total: 0,
      stripe: true,
      // 新增dialog===============
      dialogVisible: false,
      dialogHeight: null,
      dialogtableOption: {
        isShowOperate: false
      },
      dialogtableData: [],
      peopleDialogTableColumns,
      addForm: {
        empName: '',
        psId: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      dialogTotal: 0,
      saveDialogData: {
        userId: '',
        userName: '',
        organizeNo: '',
        organizeName: '',
        email: ''
      },
      // 新增权限 dialog==================
      dialogVisibleAdd: false,
      jurisdictionForm: {
        userId: '',
        userName: '',
        companyName: '',
        addCompanyList: [],
        addRoleList: []
      },
      rolesOptions: [],
      companyOptions: [],
      rules: {
        addRoleList: [{required: true, message: '请选择角色', trigger: 'change'}],
        addCompanyList: [{required: true, message: '请选择公司', trigger: 'change'}],
      },
      // 查看权限dialog===========================
      dialogVisibleWatch: false,
      watchHeight: null,
      watchTableColumns,
      watchTableData: [],
      watchTableOption: {
        isShowOperate: true,
        operateWidth: '40px'
      },
      queryDetail: {
        userId: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      watchTotal: 0

    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = this.$refs.ref2.offsetHeight - 110
    })
    window.onresize = () => {
      this.height = this.$refs.ref2.offsetHeight - 110
    }
    this.initData(this.searchData)
  },
  destroyed(){
    window.onresize = null
  },
  methods: {
    initData(params) {
      queryRoles(params).then(res => {
        if (res.data.code === '0') {
          this.tableData = res.data.body.list
          this.total = res.data.body.total
        } else {
          return false
        }
      })
    },
    // 查询
    handleSearch() {
      this.initData(this.searchData)
    },
    // 分页
    tablePage(val) {
      this.searchData.page = val
      this.initData(this.searchData)
    },
    // 重置
    handleClear() {
      this.searchData.userId = ''
      this.searchData.userName = ''
      this.searchData.companyName = ''
    },
    // 点击新增权限
    addJurisdiction(row) {
      this.dialogVisibleAdd = true
      this.jurisdictionForm.userId = row.userId
      this.jurisdictionForm.userName = row.userName
      this.jurisdictionForm.companyName = row.companyName
      addRolesJurisdiction().then(res => {
        if (res.data.code === '0') {
          this.rolesOptions = res.data.body.roleList
        }
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        const data = {
          companyName: query
        }
        addCompanyJurisdiction(data).then(res => {
          if (res.data.code === '0') {
            this.companyOptions = res.data.body.companyList
          }
        })
      } else {
        this.companyOptions = []
      }
    },
    selectCompany(data) {
      this.jurisdictionForm.addCompanyList = data
    },
    // 点击确定新增角色/公司权限
    handleAddJurisdiction(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addAllJurisdiction(this.jurisdictionForm).then(res => {
            if (res.data.code === '0') {
              this.$message.success('新增权限成功')
              this.handleCancleJurisdiction()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          return false
        }
      })
    },
    handleCancleJurisdiction() {
      this.resetForm('form')
      this.dialogVisibleAdd = false
    },
    // 点击查看权限
    watchJurisdiction(row) {
      this.dialogVisibleWatch = true
      this.$nextTick(() => {
        this.watchHeight = this.$refs.watch.offsetHeight - 20
      })
      this.queryDetail.userId = row.userId
      this.getDetailInfo()
    },
    getDetailInfo() {
      queryDetailJurisdiction(this.queryDetail).then(res => {
        if (res.data.code === '0') {
          this.watchTableData = res.data.body.list
          this.watchTotal = res.data.body.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    watchPage(val) {
      this.queryDetail.page = val
      this.getDetailInfo()
    },
    // 删除人员
    handleDelete(data) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          uid: data.uid
        }
        deleteJurisdiction(params).then(res => {
          if (res.data.code === '0') {
            this.$message.success('删除成功')
            this.getDetailInfo()
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })      
      })
    },
    // 查询弹窗表格数据
    queryDialogTable() {
      queryUserByEmpName1(this.addForm).then(res => {
        if (res.data.code === '200') {
          this.tableLoading = false
          this.dialogtableData = res.data.data.list
          this.dialogTotal = res.data.data.total
        }
      })
    },
    // 新增
    handleAdd(formName) {
      this.dialogVisible = true
      this.tableLoading = true
      this.addForm.empName = ''
      this.addForm.psId = ''
      this.$nextTick(() => {
        this.dialogHeight = this.$refs.dialogbox.offsetHeight - 70
      })
      this.queryDialogTable()
    },
    // dialog=============================
    // dialog查询
    handleSearchDialog() {
      this.queryDialogTable()
    },
    rowClick(row) {
      console.log(row)
      this.saveDialogData.userId = row.psId
      this.saveDialogData.userName = row.empName
      this.saveDialogData.organizeNo = row.orgId
      this.saveDialogData.organizeName = row.organizeName
      this.saveDialogData.email = row.email
    },
    // 点击确定新增人员
    handleSubmit() {
      if (this.saveDialogData.userId === '') {
        this.$message.error('请选择人员')
      } else {
        saveUserRole(this.saveDialogData).then(res => {
          if (res.data.code === '0') {
            this.dialogVisible = false
            this.$message.success('新增成功')
            this.saveDialogData.userId = ''
            this.initData(this.searchData)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    // 弹窗分页
    dialogChange(val) {
      this.addForm.page = val
      this.queryDialogTable()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    .search-bar {
      width: 100%;
      margin-bottom: 10px;
      .input {
        width: 100%;
      }
    }
    .table-box {
      width: 100%;
      height: calc(100vh - 190px);
      .btn-bar {
        padding: 10px 0;
      }
      .table {
        height: 100%;
      }
    }
    .dialog-box {
      height: 50vh;
    }
    .select {
      width: 100%;
    }
  }
</style>
<style>
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
  .el-input.is-disabled .el-input__inner {
    background-color:rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
</style>